<template>
  <div class="feed-back-container">
    <div class="feedBack-item">
      <div class="title">业务端账号:</div>
      <input type="text" disabled v-model.trim="Userinfo.userName" />
    </div>
    <div class="feedBack-item">
      <div class="title"><span style="color: #5232b7">*</span>影院名称:</div>
      <input
        type="text"
        v-model.trim="info.cinemaName"
        placeholder="请输入影院"
      />
    </div>
    <div class="feedBack-item">
      <div class="title"><span style="color: #5232b7">*</span>城市:</div>
      <input
        type="text"
        placeholder="请输入城市"
        v-model.trim="info.cityName"
      />
    </div>
    <div class="feedBack-item">
      <div class="title">地址:</div>
      <input type="text" v-model="info.address" placeholder="请输入地址" />
    </div>
    <div class="feedBack-item-img">
      <div class="title">图片:</div>
      <!-- 上传 -->
      <div class="feed-back-box" v-show="!imgValue">
        <div class="fileInput-nianchu-box" >
          <input
            type="file"
            style="
              width: 100px;
              height: 100px;
              background-color: pink;
              opacity: 0;
            "
            accept="image/png,image/jpeg,image/gif"
            @change="handleChangeImage($event)"
          />
        </div>
      </div>
      <!-- 有图片时候的回显 -->
      <div class="feed-back-box" v-show="imgValue">
        <img
          style="width: 50px; height: 70px; margin: 10px"
          :src="imgValue"
          @click="handlePrview"
          alt=""
        />
        <IconFont
          name="circle-close"
          v-if="imgValue"
          style="position: absolute; right: 0; top: 0"
          @click="deleteImg"
        >
        </IconFont>
      </div>
    </div>
    <div class="feedBack-item-textarea">
      <div class="title">备注:</div>
      <nut-textarea
        v-model="info.feedbackNotes"
        rows="3"
        max-length="100"
        placeholder="备注"
        limit-show
      />
    </div>
    <div style="height: 40px"></div>
    <div class="feedBack-btn">
      <nut-button
        block
        color="linear-gradient(to right, #5232B7, #7237BC)"
        :disabled="!formDataIsRmpty()"
        @click="submitResult"
        >提 交</nut-button
      >
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { IconFont } from "@nutui/icons-vue-taro";
import { ref, reactive, onMounted, computed } from "vue";
import { upload, readFileAsBuffer } from "../../utils/oss.js";
import Taro, { useDidShow } from "@tarojs/taro";
import * as orderApi from "../../api/order";
import { useUserStore } from "../../store/index";
const userStore = useUserStore();
const imgValue = ref("");
const isLoad = ref(false);

const { Token, Userinfo } = storeToRefs(userStore);
//提交参数
const info = reactive({
  address: "",
  cinemaName: "",
  cityName: "",
  feedbackNotes: "",
  feedbackUsername: Userinfo.value.userName,
  screenshot: "",
});
//判断当前输入框文本 是否为空的
const formDataIsRmpty = computed(() => {
  return () => {
    if (
      info.cinemaName &&
      info.feedbackNotes &&
      info.cityName &&
      info.screenshot &&
      info.feedbackUsername
    ) {
      return true;
    } else {
      return false;
    }
  };
});
//input 上传图片
const handleChangeImage = (files) => {
  handleUpload(files.target.childNodes[0].files[0]);
};
//上传图片
const handleUpload = async (file) => {
  try {
    const res = await readFile(file);
    const alRes = await upload(res.ossBuffer, file, "replyAnswerImg");
    imgValue.value = alRes.url;
    info.screenshot = imgValue.value;
  } catch (error) {
    console.error("上传失败：", error);
    // 在这里可以添加适当的处理逻辑，比如显示错误提示
  }
};
//oss 处理
const readFile = (file) => {
  return new Promise((resolve, reject) => {
    const OSS = require("ali-oss");
    let fileRead = new FileReader();
    fileRead.readAsDataURL(file);
    fileRead.onload = function (e) {
      const base64File = fileRead.result.replace(/^data:\w+\/\w+;base64,/, "");
      const ossBuffer = new OSS.Buffer(base64File, "base64");
      resolve({ ossBuffer, fileRead });
    };
  });
};
const handlePrview = () => {
  Taro.previewImage({
    current: imgValue.value,
    urls: [imgValue.value],
  });
};
//提交
const submitResult = async () => {
  const res = await orderApi.submitFeedBack(info);
  if (res.state == 200) {
    Taro.showToast({
      title: "提交成功",
    });
    info.address = "";
    info.cinemaName = "";
    info.cityName = "";
    info.feedbackNotes = "";
    info.feedbackUsername = "";
    info.screenshot = "";
    imgValue.value = "";
  } else {
    Taro.showToast({
      title: res.message,
      icon: "error",
    });
  }
};
const deleteImg = () => {
  info.screenshot = "";
  imgValue.value = "";
};
onMounted(() => {
  info.screenshot = "";
  imgValue.value = "";

  isLoad.value = true;
});
</script>
<style lang="scss">
.feed-back-container {
  height: 100%;
  // width: 100%;
  display: flex;
  flex-direction: column;
  color: #858a99;

  // #15181d
  .feedBack-item {
    display: flex;
    padding: 20px 25px;
    margin-top: 15px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-size: 28px;

    .title {
      color: #15181d;
      text-align: right;
    }

    input {
      text-align: right;
      flex: 1;
      color: #858a99;
    }
  }

  .feedBack-item-textarea {
    display: flex;
    padding: 20px 25px;
    margin-top: 15px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-size: 28px;

    .title {
      color: #15181d;
      text-align: right;
    }

    .nut-textarea {
      text-align: right;
      flex: 1;
    }
  }

  .feedBack-btn {
    padding: 0 25px;
  }

  .feedBack-item-img {
    display: flex;
    padding: 30px 25px;
    margin-top: 15px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-size: 28px;

    .feed-back-box {
      position: relative;
      width: 100px;
      height: 120px;

      .fileInput-nianchu-box {
        border: 1px solid #858a99;
        border-radius: 8px;
        width: 100px;
        height: 120px;

       
      }
    }
    .title {
      color: #15181d;
      text-align: right;
    }
  }
}
</style>
